目前很多公司的开发模式都是多个前端一个后端。笔者所在的公司就是这样，移动端前端的产品有两个，这两个产品有很多内容是相似的、甚至一样的。包括页面、样式、JS逻辑等。这样就想将这些公共部分封装成公共组件供这两个项目调用。

Vue很好的提供了单个项目公共组件的解决方案，包括组件复用、传参、监听、通讯、插槽等功能。但多个vue项目怎么使用公共组件呢。

这篇文章就来介绍前端多个vue项目公共组件的三种方法，npm发布引用、npm link、npm本地file引用，其中本文主要推荐本地file引用方式，若嫌篇幅太长可直接翻到文章最后查看npm本地file引用方式。

本示例代码的git地址请点击此查看

笔者使用vue cli3来创建项目，vue cli3官网地址。首先创建三个项目，project1、project2、common，其中common是公共组件，project1和project2引用了common包。

创建完成后删除common包一些无用的东西，修改package.json，增加一行 "main": "index.js", 这表明index.js就是common包的入口文件，然后创建index.js文件。

因为要使用picker，这里引用的是WeVue，正好也演示一下common包依赖第三方组件的实现。 要注意的是： 1.在index.js中需初始化第三方引用包这里引用WeVue，初始化代码如下

2.若是以本文推荐的npm本地file引入common包，common包引入了第三方组件，则project1和project2中必须也引入第三方包，并在main.js中初始化。

然后在common包中创建一个组件，这里创建一个playerPicker做示例，功能是音乐播放器，供project1和project2引用，由于篇幅控制，代码可去git查看。

index.js中需包含上面说的第三方组件初始化和公共组件的导出，本示例完整内容如下

最后结构图如下： project2和project1一样，这里就只演示project1引用common的实现。

我们可以采取专人维护common包的方式，common的组件编写完成后，将其发布到npm。 发布流程如下：

当然common这个名字肯定被注册了，这里只做示例，真正使用时需使用一个未在npm中注册的包名。需要注意的是，若报错你没有权限发布该项目，那应该就是你的这个项目名被别人用过了，在package.json中修改下项目名再发布吧。

开发project1和project2的程序猿通过npm install命令将common以node_module的方式引入

另外，每次改动代码再次发布时，需要修改package.json文件中的版本号，不然发布不成功。

这样开发project1和project2的程序猿只需关注自己项目的业务功能，公共的common有更新时，执行命令npm install common就可以了。

不过这个方案的问题，频繁改动common包时，project1和project2需要频繁更新common包的引入。

首先进入common包，在控制台输入

这会创建一个软连接，并保存到目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下面。

然后进入project1和project2，在控制台输入

这就将这个公共的项目通过软连接的方式引入到项目里面来了。下图可以看到在node_modules中common包和其他的包文件夹样式是不一样的，common文件夹只是一个软链接。 这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。

需要注意的是，当项目包依赖更新后，也就是执行了 npm install xxx 之后，需要重新link common项目。而且使用npm link后本地package.json里没有记录，无法直观的查看本地包的引用。

分别进入project1和project2，在控制台输入命令：

其中…/common/是common的相对路径，这里也可以输入绝对路径。

这样就将common这个工程以node_module的方式引入到project1和project2项目中了。可以正常使用common在index.js中导出的组件了。

命令执行完后，package.json里会多一条记录

也可以在package.json里加上"common": “file:…/common” 这一行再执行npm install命令。

同样这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。而且在package.json中有引入记录。

公共组件创建好了，需要引入，引入代码和引入其他组件的方式一样，代码如下：

最后实现结果

在实际使用npm file中，会遇到不少坑，《这篇文章》会讲述笔者遇到的2个问题并给出解决方案